<template>
  <xdh-map :center="[108.957739, 34.342966]" :zoom="9" type="TDT">
    <div class="mapbutton">
      <button class="loginout" @click="loginout">退出登录</button>
      <button @click="gugemap">谷歌地图</button>
      <button @click="start">开始测距</button>
      <select v-model="type">
        <option value="length">距离</option>
        <option value="area">面积</option>
      </select>
    </div>
    <xdh-map-pointer class="mapxyz" :margin="[0, 0, 10, 10]"></xdh-map-pointer>
    <xdh-map-type class="maptype" placement="left-bottom"></xdh-map-type>
    <xdh-map-measure
      ref="measure"
      :type="type"
      @on-measureEnd="measureEndHandle"
    ></xdh-map-measure>
    <xdh-map-scale units="metric"></xdh-map-scale>
  </xdh-map>
</template>

<script>
import {
  XdhMap,
  XdhMapMeasure,
  XdhMapPointer,
  XdhMapType,
  XdhMapOverview,
  XdhMapScale,
} from "xdh-map";
export default {
  components: {
    XdhMap,
    XdhMapMeasure,
    XdhMapPointer,
    XdhMapType,
    XdhMapOverview,
    XdhMapScale,
  },
  data() {
    return {
      type: "length",
      styleJson: {
        className: "Style",
        fill: {
          className: "Fill",
          color: "rgba(255, 255, 255, 0.2)",
        },
        stroke: {
          className: "Stroke",
          color: "rgba(0, 0, 0, 0.5)",
          lineDash: [10, 10],
          width: 2,
        },
        image: {
          className: "CircleStyle",
          radius: 5,
          stroke: {
            className: "Stroke",
            color: "rgba(0, 0, 0, 0.7)",
          },
          fill: {
            className: "Fill",
            color: "rgba(255, 255, 255, 0.2)",
          },
        },
      },
    };
  },
  methods: {
    start() {
      this.$refs.measure.start();
    },
    measureEndHandle(current, all) {
      console.log(current, all);
      this.$refs.measure.stop();
    },
    loginout() {
      this.$router.push("/login");
    },
    gugemap() {
      this.$router.push("/map");
    },
  },
};
</script>

<style scoped>
.mapbutton {
  position: fixed;
  margin-left: 10px;
  margin-top: 12px;
  z-index: 999;
}
button {
  height: 50px;
  width: 100px;
  border-radius: 6px;
}
select {
  height: 50px;
  width: 80px;
  border-radius: 6px;
  background-color: #f0f0f0;
}
.maptype {
  height: 72px;
  position: absolute;
  top: 100px;
}
.mapxyz {
  background-color: #cccccc;
  height: 12px;
  position: absolute;
  top: 70px;
}
</style>
